<template>
    <div class="template-config-list">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>模板配置管理</span>
                    <el-button type="primary" link>
                        <router-link
                            :to="{
                                path: getRoutePath('templateAdd'),
                                query: {}
                            }"
                        >
                            新增配置
                        </router-link>
                    </el-button>
                    <!-- <el-button type="primary" @click="handleAdd">
                        <el-icon>
                            <Plus />
                        </el-icon>
                        新增配置
                    </el-button> -->
                </div>
            </template>

            <!-- 搜索区域 -->
            <div class="search-area">
                <el-form :model="searchForm" inline>
                    <el-form-item label="模板编号">
                        <el-input v-model="searchForm.templateNumber" placeholder="请输入模板编号" clearable
                            style="width: 200px" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="handleSearch">
                            <el-icon>
                                <Search />
                            </el-icon>
                            搜索
                        </el-button>
                        <el-button @click="handleReset">
                            <el-icon>
                                <Refresh />
                            </el-icon>
                            重置
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
            <!-- 表格区域 -->
            <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange"
                style="width: 100%">
                <el-table-column prop="templateNumber" label="模板编号" />

                <el-table-column label="Logo">
                    <template #default="{ row }">
                        <el-image v-if="row.logo" :src="row.logo" :preview-src-list="[row.logo]" class="table-image"
                            fit="cover" />
                        <span v-else class="no-image">暂无</span>
                    </template>
                </el-table-column>

                <el-table-column label="背景图">
                    <template #default="{ row }">
                        <el-image v-if="row.backgroundImage" :src="row.backgroundImage"
                            :preview-src-list="[row.backgroundImage]" class="table-image" fit="cover" />
                        <span v-else class="no-image">暂无</span>
                    </template>
                </el-table-column>

                <el-table-column label="开屏页动画">
                    <template #default="{ row }">
                        <div v-if="row.splashMedia" class="media-cell">
                            <video v-if="isVideo(row.splashMedia)" :src="row.splashMedia" class="table-video" />
                            <el-image v-else :src="row.splashMedia" :preview-src-list="[row.splashMedia]"
                                class="table-image" fit="cover" />
                        </div>
                        <span v-else class="no-image">暂无</span>
                    </template>
                </el-table-column>

                <el-table-column prop="createTime" label="创建时间">
                    <template #default="{ row }">
                        {{ formatTime(row.createTime) }}
                    </template>
                </el-table-column>

                <el-table-column prop="updateTime" label="更新时间">
                    <template #default="{ row }">
                        {{ formatTime(row.updateTime) }}
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="200" fixed="right">
                    <template #default="{ row }">
                        <el-button type="primary" size="small" @click="handleEdit(row)">
                            编辑
                        </el-button>
                        <el-button type="success" size="small" @click="handleView(row)">
                            查看
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="pagination-area">
                <el-pagination v-model:current-page="pagination.page" v-model:page-size="pagination.limit"
                    :page-sizes="[10, 20, 50, 100]" :total="pagination.total"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </el-card>

        <!-- 查看详情弹窗 -->
        <el-dialog v-model="viewDialogVisible" title="配置详情" width="600px">
            <div v-if="currentRow" class="detail-content">
                <el-descriptions :column="1" border>
                    <el-descriptions-item label="模板编号">
                        {{ currentRow.templateNumber }}
                    </el-descriptions-item>
                    <el-descriptions-item label="Logo">
                        <el-image v-if="currentRow.logo" :src="currentRow.logo" :preview-src-list="[currentRow.logo]"
                            class="detail-image" fit="contain" />
                        <span v-else>暂无</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="背景图">
                        <el-image v-if="currentRow.backgroundImage" :src="currentRow.backgroundImage"
                            :preview-src-list="[currentRow.backgroundImage]" class="detail-image" fit="contain" />
                        <span v-else>暂无</span>
                    </el-descriptions-item>
                    <el-descriptions-item label="开屏页动画">
                        <div v-if="currentRow.splashMedia">
                            <video v-if="isVideo(currentRow.splashMedia)" :src="currentRow.splashMedia" controls
                                class="detail-video" />
                            <el-image v-else :src="currentRow.splashMedia" :preview-src-list="[currentRow.splashMedia]"
                                class="detail-image" fit="contain" />
                        </div>
                        <span v-else>暂无</span>
                    </el-descriptions-item>
                </el-descriptions>
            </div>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Search, Refresh, Delete } from '@element-plus/icons-vue'
import { getRoutePath } from '@/router'

import {
    getWebsiteConfig,
    type TemplateConfigData
} from '@/api/template_config'

const router = useRouter()

// 响应式数据
const loading = ref(false)
const tableData = ref<TemplateConfigData[]>([])
const selectedIds = ref<number[]>([])
const viewDialogVisible = ref(false)
const currentRow = ref<TemplateConfigData | null>(null)

// 搜索表单
const searchForm = reactive({
    templateNumber: ''
})

// 分页数据
const pagination = reactive({
    page: 1,
    limit: 10,
    total: 0
})

// 判断是否为视频文件
const isVideo = (url: string): boolean => {
    return url.toLowerCase().includes('.mp4') || url.toLowerCase().includes('video')
}

// 格式化时间
const formatTime = (time: string): string => {
    if (!time) return '-'
    return new Date(time).toLocaleString('zh-CN')
}

// 获取列表数据
const getList = async () => {
    loading.value = true
    try {
        const params = {
            page: pagination.page,
            limit: pagination.limit,
            ...searchForm
        }
        const response = await getWebsiteConfig()
        if (response.code === 1) {
            tableData.value = response.data.list || []
            pagination.total = response.data.total || 0
        } else {
            ElMessage.error(response.msg || '获取数据失败')
        }
    } catch (error) {
        console.error('获取列表失败:', error)
        ElMessage.error('获取数据失败')
    } finally {
        loading.value = false
    }
}

// 搜索
const handleSearch = () => {
    pagination.page = 1
    getList()
}

// 重置搜索
const handleReset = () => {
    searchForm.templateNumber = ''
    pagination.page = 1
    getList()
}

// 新增
const handleAdd = () => {
    router.push('/template-config/add')
}

// 编辑
const handleEdit = (row: TemplateConfigData) => {
    router.push(`/template-config/edit/${row.id}`)
}

// 查看详情
const handleView = (row: TemplateConfigData) => {
    currentRow.value = row
    viewDialogVisible.value = true
}




// 选择变化
const handleSelectionChange = (selection: TemplateConfigData[]) => {
    selectedIds.value = selection.map(item => item.id!)
}

// 分页大小变化
const handleSizeChange = (size: number) => {
    pagination.limit = size
    pagination.page = 1
    getList()
}

// 当前页变化
const handleCurrentChange = (page: number) => {
    pagination.page = page
    getList()
}

// 组件挂载时获取数据
onMounted(() => {
    getList()
})
</script>

<style scoped>
.template-config-list {
    padding: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
}

.search-area {
    margin-bottom: 20px;
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
}


.table-image {
    width: 60px;
    height: 40px;
    border-radius: 4px;
}

.table-video {
    width: 60px;
    height: 40px;
    border-radius: 4px;
    object-fit: cover;
}

.media-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.no-image {
    color: #999;
    font-size: 12px;
}

.pagination-area {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

.detail-content {
    max-height: 500px;
    overflow-y: auto;
}

.detail-image {
    max-width: 200px;
    max-height: 150px;
}

.detail-video {
    max-width: 300px;
    max-height: 200px;
}
</style>